<script lang="ts" setup>
  import { reactive, ref } from "vue"
  import { examine } from "@/api/franchisee"
  import { type FormInstance, type FormRules, ElMessage } from "element-plus"
  import useForm from '@/hooks/useForm'
  import useFile from '@/hooks/useFile'
  import { carGetDetails} from "@/api/vehicle/vehicle"
  import AdminSelect from '@/components/AdminSelect/index.vue'
  import CompanySelect from '@/components/CompanySelect/index.vue'
  import CustomerSelect from '@/components/CustomerSelect/index.vue'
  import Map from '@/components/Map/index.vue'
  import { debounce } from '@/utils'

  interface Props {
    id?: number
    data?: any
    title?: string
  }

  const props = withDefaults(defineProps<Props>(), {
    id: 0,
    data: ()=>({}),
    title: ""
  })


  const center = ref({ lat: 30.290756, lng: 120.074387 });
  const zoom = ref(10);
  const doubleClickZoom = ref(true);
  const print = (e: unknown) => {
    console.log(e);
  };

  const control=ref({
        scale: {},
        zoom: {
          position: 'bottomRight',
        },
      }) 
  const events=reactive ({
      dblclick: print,
    })
  const markerStyles=reactive({
        'car-down': {
          width: 40,
          height: 40,
          anchor: {
            x: 20,
            y: 20,
          },
          faceTo: 'map',
          rotate: 180,
          src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
          // src:'/img/car.png'
        },
        // start: {
        //   width: 25,
        //   height: 35,
        //   anchor: { x: 16, y: 32 },
        //   src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',
        // },
        // end: {
        //   width: 25,
        //   height: 35,
        //   anchor: { x: 16, y: 32 },
        //   src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',
        // },
      }) 
      
      const markerGeometries=ref([
        {
          id: 'car',
          styleId: 'car-down',
          position: { lat: 30.290756, lng: 120.074387 },
        },
        // {
        //   id: 'start',
        //   styleId: 'start',
        //   position: { lat: 39.98481500648338, lng: 116.30571126937866 },
        // },
        // {
        //   id: 'end',
        //   styleId: 'end',
        //   position: { lat: 39.978813710266024, lng: 116.31699800491333 },
        // }
      ])
    const zoomTo = (value: number) => {
      zoom.value = value;
    };
  const form = ref<any>({})
  const formRef = ref<any>()
  const emit = defineEmits(['cancel','success'])
  const loading = ref(false)
  const rules: FormRules = {
    adminId: [
      { required: true, message: '请负责人', trigger: 'change' },
    ],
  }
  const showDrawer = ref(true)
  const cancel = ()=>{
    emit('cancel')
  }
  const getData = () => {
    carGetDetails({id:props.id}).then((res: any)=>{
      form.value = res
      console.log(res,'res')
      if(res.lat){
        center.value.lat=res.lat
        center.value.lng=res.lng

        // markerGeometries.value[0].position.lat=res.lat
        // markerGeometries.value[0].position.lng=res.lng
        markerStyles['car-down']= {
          width: 40,
          height: 40,
          anchor: {
            x: 20,
            y: 20,
          },
          faceTo: 'map',
          rotate: 180,
          src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
          // src:'/img/car.png'
        }
        markerGeometries.value=[
        {
          id: 'car',
          styleId: 'car-down',
          position: { lat: res.lat, lng: res.lng },
        }]
        zoomTo(18)
      }
      
    })
  }

  if(props.id) getData()
</script>

<template>
  <el-drawer
      v-model="showDrawer"
      :title="props.title"
      @close="cancel"
      size="800px"
      direction="rtl"
    >
      <div class="fieldTable">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="top">
          <el-row :gutter="20" class="form-card-main">
            <el-col :span="12">
              <el-form-item label="负责人" prop="adminId">
                 <AdminSelect v-model="form.adminId" :multiple="false" width="100%" disabled></AdminSelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车牌号" prop="carNo">
                <el-input v-model="form.carNo" style="width: 100%" placeholder="请输入" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-input v-model="form.status" style="width: 100%" placeholder="请输入" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备编码" prop="imei">
                <el-input v-model="form.imei" placeholder="请输入设备编码" clearable style="width: 100%" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属公司" prop="companyId">
                 <CompanySelect v-model="form.companyId" :multiple="false" width="100%" disabled></CompanySelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户" prop="customIds">
                <CustomerSelect v-model="form.customIds" :multiple="true" width="100%" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆类型" prop="type">
                <el-select style="width:200px;" clearable v-model="form.type" placeholder="请选择" disabled>
                  <el-option label="大型" :value="0"></el-option>
                  <el-option label="中型" :value="1"></el-option>
                  <el-option label="小型" :value="2"></el-option>
                  <el-option label="其他" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="form-card-main">
            <el-col :span="24">
              <el-form-item label="车辆当前位置" prop="type">
				  <Map :lng="center.lng"
					:lat="center.lat"
					:zoom="18"/>
                    <!-- <tmap-map
                      mapKey="ZG4BZ-EIVCN-MPXFI-SE7WT-VKV7S-LNBOS"
                      :events="events"
                      :center="center"
                      :zoom="zoom"
                      :doubleClickZoom="doubleClickZoom"
                      :control="control"
                    >
                    <tmap-multi-marker
                      :styles="markerStyles"
                      :geometries="markerGeometries"
                      ref="markers"
                      @click="print"
                      @dblclick="print"
                    />
                  </tmap-map> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        </div>
      </el-drawer>
</template>


<style lang="scss" scoped>

</style>
